<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- TODO remove the tablib references from the chlid jsp put them in the layout.jsp -->

<div class="window">
	<div class="window-holder">
	
		<div class="window-content">
			<div class="breadcrumb green">
				<a href="#" class="active">Applications</a>
			</div>
		
			<div id="applicationViewGrid" style='margin:auto;' class="pq-grid-holder"></div>
		</div>
	</div>
</div>

<c:url var="applicationGrid" value="/application/applicationGrid" />
<script>
$(function () {
    var colM = [
    { title: "ID", width: 100 , dataType: "integer",dataIndx:"applicationId",editable:false},
    { title: "Title", dataType: "string", width: 100,dataIndx:"title" ,editable:false},
    { title: "Amount", dataType: "float", width: 100,dataIndx:"amount" ,editable:false},
	{ title: "Status", dataType: "string", width: "100",dataIndx:"status",editable:false },
	{ title: "First Name", dataType: "string", width: 100,dataIndx:"firstName" ,editable:false},
	{ title: "Last Name", dataType: "string", width: 100 ,dataIndx:"lastName",editable:false},
	{ title: "Creation Date", dataType: "date", width: 100 ,dataIndx:"creationDate",editable:false}
	];
    var dataModel = {
        location: "remote",
        sorting: "remote",
        
        dataType: "JSON",
        method: "GET",
        curPage: 1,
       
        getUrl: function () {
            var sortDir = (this.sortDir == "up") ? "asc" : "desc";
            var sort = ['applicationId', 'title', 'amount', 'status', 'fistName', 'lastName',
                 'creationDate'];
            return { url: "${applicationGrid}", data: "cur_page=" + this.curPage + "&records_per_page=" + 
                this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir };
        },
        getData: function (dataJSON) {
            //var data= 
            	//console.log(dataJSON)
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON };                
        }
    };

    var grid1 = $("div#applicationViewGrid").pqGrid({width:"auto",height: 400,
        dataModel: dataModel,
        colModel: colM,
        resizable: true,            
        columnBorders: true
        
    });
    //for details
    $.extend(colM[1], {
    render: function (ui) {
        var rowData = ui.rowData;
     
            
            return '<a href="javascript:_loadScreenFor(\'/application/getInputScreen/'+rowData.applicationId+'\')">' + rowData.title+'</a>';
       
    }
  });
    //for edit
    $.extend(colM[0], {
  	  render: function (ui) {
  	      var rowData = ui.rowData;
  	   
  	         
  	        return '<a href="javascript:showObjectDetaisl(\'/application/details/'+rowData.applicationId+'\')">' + rowData.applicationId+'</a>';
  	     
  	  }
  	});
});
</script>